<template>
	<view :style="'overflow:'+ istran ? 'hidden':'scroll'">
		<view class="content">
			<view class="info" v-if="article.type == 1&&top == 1" style="margin-top: 40rpx;">
				<view class="left" @tap="person">
					<headimg :realSrc="article.avatar"></headimg>
				</view>
				<view class="center">
					<view class="name">{{ article.nicheng ? article.nicheng : '未设置昵称' }}</view>
					<view class="time">{{ article.time }}</view>
				</view>
				<view class="follow" v-show="addType != 999 && article.user_id != user_id && !article.follow_id" @tap="follow">关注</view>
				<view class="follow follow_cancel" v-show="article.user_id != user_id && article.follow_id" @tap="follow">已关注</view>
			</view>

			<view class="info" v-if="article.type == 2&&top == 2" style="margin-top: 40rpx;">
				<view class="left" @tap="person">
					<headimg :realSrc="article.subhead_avatar"></headimg>
				</view>
				<view class="center">
					<view class="name">{{ article.subhead_nicheng ? article.subhead_nicheng : '未设置昵称' }}</view>
					<view class="time">{{ article.ftime }}</view>
				</view>
				<view class="follow" v-show="addType != 999 && article.user_id != user_id && !article.follow_id" @tap="follow">关注</view>
				<view class="follow follow_cancel" v-show="article.user_id != user_id && article.follow_id" @tap="follow">已关注</view>
			</view>
			
			<view class="info" v-if="article.type == 1&&top == 2" style="margin-top: 40rpx;">
				<view class="left" @tap="person"><headimg :realSrc="article.avatar"></headimg></view>
				<view class="center">
					<view class="name">{{ article.nicheng ? article.nicheng : '未设置昵称' }}</view>
					<view class="time">{{ article.time }}</view>
				</view>
				<view class="follow" v-show="addType != 999 && article.user_id != user_id && !article.follow_id" @tap="follow">关注</view>
				<view class="follow follow_cancel" v-show="article.user_id != user_id && article.follow_id" @tap="follow">已关注</view>
			</view>

			<view class="title" v-if="article.type == 1 &&top == 1&& article.title">{{ article.title }}</view>

			<u-parse class="cont" v-if="article.type == 1 &&top == 1 && article.content" :content="article.content"></u-parse>

			<view class="title" v-if="article.type == 2 &&top == 2 && article.title">{{ article.subhead_title }}</view>
			<u-parse class="cont" v-if="article.type == 2&&top == 2 && article.content" :content="article.content"></u-parse>

			<view class="title" v-if="article.type == 1 &&top == 2&& article.title">{{ article.title }}</view>
			<u-parse class="cont" v-if="article.type == 1&&top == 2 && article.content" :content="article.content"></u-parse>

			<view class="from" v-if="article.type == 2&&top == 3">
				<view class="fromInfo">
					<view class="fromInfo-left">
						<headimg :realSrc="article.subhead_avatar"></headimg>
					</view>
					<view>
						<view class="fromInfo_name">{{ article.subhead_nicheng ? article.subhead_nicheng : '未设置昵称' }}</view>
						<view class="fromInfo_time">{{ article.ftime }}</view>
					</view>
				</view>
				<view class="fromCont">
					<view class="title" :class="[article.img_url ? 'titleShort':'']">{{ article.subhead_title}}</view>
					<image v-if="article.img_url" :src="article.img_url"></image>
				</view>
			</view>
			<!-- 转发的文章详情 -->
			<view class="from" v-if="article.type == 2&&top == 1" style="height: 100%;">
				<view class="fromInfo">
					<view class="fromInfo-left">
						<headimg :realSrc="article.avatar"></headimg>
					</view>
					<view>
						<view class="fromInfo_name">{{ article.nicheng ? article.nicheng : '未设置昵称' }}</view>
						<view class="fromInfo_time">{{ article.time }}</view>
					</view>
				</view>
				<view class="fromCont">
					<view class="uni-flex uni-column artDes">
						<view class="tit" v-if="article.subhead_title">{{article.title}}</view>
						<u-parse class="cont" :content="article.subhead_content"></u-parse>
					</view>
				</view>
			</view>

			<!-- 父文章 -->
			<view class="from" v-if="article.type == 2&&top == 1" @tap="goDetail(article.article_fid)" style="border-bottom: 0px;">
				<view class="uni-flex uni-row fowArt">
					<view>
						<image :src="article.img_url?article.img_url:'../../static/images/fengmian.png'" mode="aspectFill"></image>
					</view>
					<view>
						<view class="uni-flex uni-column fowText">
							<view>@{{article.subhead_nicheng?article.subhead_nicheng:'未设置昵称'}}</view>
							<view>{{article.subhead_title}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="cont_info">
					<view class="tip" v-if="article.article_name">{{ article.article_name }}</view>
					<view class="num">{{ article.readnum }}阅读</view>
				</view> -->
			</view>

			<view style="width: 100%;" v-show="stateType == 0 && addType != 999">
				<view class="evaluate">
					<view class="evaluate_item" :style="{'color':article.is_like == 2?'#00D5A2':''}" @tap="isLike">
						<view><i class="iconfont iconzanpress"></i></view>
						<view class="evaluate_item_text">{{ article.likenum }}</view>
					</view>
					<view class="evaluate_item" @tap="forward(article)">
						<view><i class="iconfont iconforward-null"></i></view>
						<view class="evaluate_item_text">{{ article.transpondnum }}</view>
					</view>
					<view class="evaluate_item" @tap="isShare = !isShare">
						<view><i class="iconfont iconfenxiang1"></i></view>
					</view>
				</view>
				<!-- 评论模块 -->
				<view class="commentTitle">评论</view>
				<view class="none" v-if="commentList.length == 0">没有评论</view>

				<view style="padding-bottom: 200upx;">
					<view v-for="(item,index) in commentList" :key="index">
						<!-- 一级评论 -->
						<view class="item-one" @tap.stop="huifu($event,item.article_reply_id,0,item.users_name,index)">
							<view class="item-one-head">
								<headimg v-if="item.avatar" :realSrc="item.avatar"></headimg>
								<headimg v-else :realSrc="defimg"></headimg>
							</view>
							<view class="item-one-text">
								<view class="item-one-name">
									<text class="item-one-name-text">{{item.users_name?item.users_name:'未设置昵称'}}</text>
									<text class="item-one-name-lable" v-if="article.user_id==item.user_id">作者</text>
								</view>
								<text class="item-one-content">{{item.reply_text}}</text>
							</view>
						</view>
						<!-- 一级评论 -->
						<!-- 二级评论 -->
						<div class="item-two" v-if="index1<1||item.isunfold" v-for="(item1,index1) in item.answer" :key="index1"
						 @tap.stop="huifu($event,item.article_reply_id,item1.article_reply_id,item1.users_name,index,index1)">
							<div class="item-two-head">
								<headimg v-if="item1.avatar" :realSrc="item1.avatar"></headimg>
								<headimg v-else :realSrc="defimg"></headimg>
							</div>
							<div class="item-two-text">
								<div class="item-two-name">
									<text class="item-two-name-text">{{item1.users_name}}</text>
									<text class="item-two-name-lable" v-if="article.user_id==item1.user_id">作者</text>
								</div>
								<text class="item-two-content" v-if="item1.answer_id == 0">{{item1.reply_text}}</text>
								<text class="item-two-content" v-if="item1.answer_id != 0 && item1.answer_id == v.article_reply_id" v-for="(v,k) in item.answer"
								 :key="k">回复{{v.users_name+':'+item1.reply_text}}</text>
							</div>
						</div>
						<div class="item-two" v-if="item.answer.length>1">
							<div v-if="!item.isunfold" @tap.stop="unfold($event,index)">
								<text class="item-two-btn">展开{{item.answer.length-1}}条回复</text>
							</div>
							<div v-else @tap.stop="unfold($event,index)">
								<text class="item-two-btn">收起</text>
							</div>
						</div>
						<!-- 二级评论 -->
					</view>
				</view>

				<uni-load-more v-if="commentList.length >= 6" :status="status" :content-text="contentText" />
			</view>
		</view>
		<!-- <uni-popup id="popupfow" ref="popupfow" type="share" style="z-index: 9999;">
			<newEdit :istram="istran" :fowData="fowData" :sendTip="sendTip" :aoe="aoe" :obj="obj"></newEdit>
		</uni-popup> -->
	
		<view v-if="istran" style="position:fixed; top: 0;width: 100%;height: 100%; z-index: 1000; background: rgba(51, 51, 51, 0.5);" @touchmove.stop.prevent="()=>false"> 
			<view style="width: 100%;height: 100%;"  @click="closetran" ></view>
			<newEdit  @closetran="closetran" :istram="istran" :fowData="fowData" :sendTip="sendTip" :aoe="aoe" :obj="obj"></newEdit>
		</view>

		<view v-show="stateType == 0 && addType != 999">
			<sendinput ref="setfocus" :isshow='true'  :username="article.nicheng" :placeholder="placeholder" :isSendFocus="isSendFocus" @sendmsg="send"></sendinput>
		</view>
		<!-- 违规弹窗 -->
		<view class="button" v-if="isDelete" @tap="closeButton">
			<view class="deleteView">
				<view class="deleteTitle">删除之后无法恢复，您确定要删除文章？</view>
				<view class="buttons"><text class="btn_cancle" @tap="closeButton">取消</text><text class="btn_yes" @tap="btnYes">确定</text></view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<uni-popup ref="handle" type="share" :custom="true">
			<view class="uni-share">
				<view class="uni-bottom">
					<view class="uni-share-title">
						<view class="title_text">分享到</view>
						<view class="uni-share-btn" @click="cancel('handle')"><i class="iconfont1 iconguanbi"></i>
						</view>
					</view>
					<view class="uni-share-content">
						<view v-for="(item, index) in handle" :key="index" class="uni-share-content-box" @tap="report(index,2)">
							<view class="uni-share-content-image">
								<i class="iconfont" :class="item.icon"></i>
							</view>
							<view class="uni-share-content-text">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 分享弹窗 -->
		<uni-share v-if="isShare && isGetDetail" :artBg="article.img_url" :name="article.nicheng" :title="article.title"
		 :content="article.content" :qrText="qrText" @closeFunc="closeButton"></uni-share>


		<!-- 收藏弹窗 -->
		<view class="showPopup" v-if="showPopup" @tap="closeCollect">
			<view class="showPopup-cont">
				<view class="popup-title"><i class="iconfont iconjujue-copy-copy"></i></view>
				<view class="popup-cont">
					<view class="popup-cont-item" @click="collectBtn">
						<i class="iconfont iconshoucang"></i>
						<text>收藏</text>
					</view>
					<view class="popup-cont-item" @click="report">
						<i class="iconfont iconjubao"></i>
						<text>举报</text>
					</view>
				</view>
				<view class="popup-cancel">取消</view>
			</view>
		</view>
		<!-- 收藏弹窗 -->
		<!-- 		<uni-popup id="popupWX" ref="popupWX" type="share">
			<view class="uni-flex uni-row share">
				<view class="text" style="-webkit-flex: 1;flex: 1;margin-right: 30rpx;">
					<i class="iconfont iconcuo"
						style="color: #DCDFE6;font-size: 40rpx;background-color: #F4F7FC;border-radius: 100rpx;"
						@click="closeCollect"></i>
				</view>
			</view>
			<view class="uni-flex uni-row collShare">
				<view>
					<view style="background-color: #00ACFE;" @click="collectBtn">
						<i class="iconfont iconshoucang1"></i>
					</view>
					<text>收藏</text>
				</view>
				<view>
					<view style="background-color: #F56C6C;" @click="report">
						<i class="iconfont iconjubao"></i>
					</view>
					<text>举报</text>
				</view>
			</view>
			<view class="closeCollect" @click="closeCollect">取消</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import newEdit from './components/newEdit.vue';
	import headimg from '@/components/head_img.vue';
	import util from '@/common/util.js';
	import uParse from '@/components/u-parse/u-parse.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import sendinput from './components/sendinput.vue';
	import uniShare from './components/share.vue';
	export default {
		components: {
			uParse,
			uniLoadMore,
			uniPopup,
			headimg,
			sendinput,
			uniShare,
			newEdit
		},
		data() {
			return {
				defimg: this.defimg,
				stateType: '', // 0为默认抖教文章
				addType: '', //附加条件: 0+0为首页抖教推荐  0+1为智囊团  1+3为家文化&孩子-目标、成长、才艺  2+2为育儿经&育儿经-我的  3+4为我的智囊团 0+999为机构资讯
				article: {}, //文章详情
				article_id: '', //文章ID
				article_fid: '', //父文章ID
				collect: '', //收藏状态
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				commentList: [], //评论列表
				black_state: 1, //拉黑状态 0为正常，1为拉黑
				user_id: uni.getStorageSync('userInfo').id,
				apply_text: '', //评论内容
				isShow: false, //操作是否显示
				isFoucs: false, //评论是否获取焦点
				isDelete: false, //删除弹框是否显示
				handle: [{ //分享区域
						text: '微信',
						icon: 'iconweixin',
						name: 'weixin'
					},
					{
						text: '朋友圈',
						icon: 'iconpengyouquan',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: 'iconqq',
						name: 'qq'
					},
					{
						text: '微博',
						icon: 'iconweibo',
						name: 'weibo'
					},
					{
						text: '好友',
						icon: 'iconchengyuan',
						name: 'hy'
					}
				],
				releaseType: 1, //是否为发布
				admin_user_id: '', //机构ID,
				pid: 0,
				video_reply_id: 0,
				placeholder: '说点什么吧',
				istran: false, //是否点击了转发
				isShare: false, //是否点击了分享
				qrText: '', //分享链接
				isGetDetail: false, //是否获得文章详情
				isSendFocus: false, //发送评论文本框是否聚焦
				contentHeight: null,
				fowData: null, //转发的文章显示
				sendTip: { //发布、查看范围，地址
					aoeName: '公开',
					navName: '公开',
				},
				top: null,
				obj: '',
				aoe: '',
				showPopup: false, //是否展示收藏弹框
			}
		},
		onPullDownRefresh() {
			if (this.stateType == 0) {
				this.reload = true;
				this.page = 1;
				this.getComment()();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			}
		},
		onReachBottom() {
			if (this.stateType == 0) {
				this.status = 'loading';
				this.page = this.page + 1;
				var _this = this;
				setTimeout(function() {
					_this.getComment();
				}, 500);
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.showPopup = true;
			}
			if (this.stateType == 0 || this.stateType == 1 || (this.stateType == 2 && this.user_id == this.article
					.user_id) || this.stateType == 3) {
				this.isShow = !this.isShow;
			} else if (this.stateType == 2) {
				uni.navigateTo({
					url: '/pages/articleModule/article-release?stateType=' + this.stateType + '&addType=' + this
						.addType
				})
			}
		},
		onLoad(e) {
			this.top = e.top
			this.stateType = e.stateType;
			this.addType = e.addType;
			this.article_id = e.article_id;
			if (e.releaseType) {
				this.releaseType = e.releaseType;
			}
			if (e.admin_user_id) {
				this.admin_user_id = e.admin_user_id;
			}
			this.qrText = '/pages/articleModule/newarticle-detail?stateType=' + this.stateType + '&addType=' + this
				.addType +
				'&article_id=' + this.article_id + '&releaseType=' + this.releaseType + '&admin_user_id=' + this
				.admin_user_id
			if (e.isShare == 'true') {
				this.isShare = true;
			}
			if (e.isSendFocus == 'true') {
				this.isSendFocus = true;
			}
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			// #endif
			if (this.stateType == 0 && this.addType != 999) {
				this.addReadnum();
			} else if (this.stateType == 0 && this.addType == 999) {
				webView.setTitleNViewButtonStyle(0, {
					text: '',
					width: 0
				});
			} else if (this.stateType == 2) {
				webView.setTitleNViewButtonStyle(0, {
					text: '发布'
				});
			}
		},
		onShow() {
			let _this = this
			console.log('_this.obj', this.obj);
			console.log('_this.aoe', this.aoe);
			uni.$once('look-obj', function(data) {
				_this.obj = data.Audience_scope
				if (data.Audience_scope == 1) {
					_this.sendTip.aoeName = '全部'
				} else if (data.Audience_scope == 2) {
					_this.sendTip.aoeName = '仅自己'
				} else if (data.Audience_scope == 3) {
					_this.sendTip.aoeName = '仅老师'
				} else if (data.Audience_scope == 4) {
					_this.sendTip.aoeName = '仅家长'
				}
			})
			uni.$once('send_aoe', function(data) {
				if (data.Release_scope.length >= 2) {
					_this.aoe = '1'
				} else {
					_this.aoe = data.Release_scope[0]
				}
				console.log(data.Release_scope[0]);
				if (data.Release_scope.length == 1 && data.Release_scope[0] == 2) {
					_this.sendTip.navName = '个人'
				} else if (data.Release_scope.length == 1 && data.Release_scope[0] == 3) {
					_this.sendTip.navName = '学校'
				} else if (data.Release_scope.length >= 2) {
					_this.sendTip.navName = '全部'
				}
			})
			console.log('sendTip', this.sendTip);
			if (this.stateType == 0 && this.addType != 999) {
				this.page = 1;
				this.reload = true;
				this.getComment();
			}
			this.getDetail();
		},
		methods: {
			moveHandle(){
				console.log(1);
			},
			onimage: function() {
				console.log("==========================================");
			},
			/* 关闭转发 */
			closetran:function(){
				this.page = 1;
				this.reload = true;
				this.commentList = [];
				this.getComment();
				this.istran = false;
			},
			unfold: function(e, index) {
				if (this.commentList[index]['isunfold']) {

					this.commentList[index]['isunfold'] = false;
				} else {
					console.log("+++");
					this.commentList[index]['isunfold'] = true;
				}
				this.$forceUpdate();
			},
			// 转发文章详情
			goDetail(id) {
				console.log(id);
				/* let url = '/pages/articleModule/article-detail?stateType=' + this.stateType + '&addType=' + this.addType +
					'&article_id=' + id */
				let url = '/pages/articleModule/newarticle-detail?stateType=' + this.stateType + '&addType=' + this
					.addType + '&article_id=' + id + '&isShare=' + false + '&admin_user_id=' + '&top=' + 2
				uni.navigateTo({
					url: url
				})
			},
			/* 获取文章详情 */
			getDetail() {
				var data = {
					users_type: Number(this.stateType + 1)
				}
				var url = '';
				if (this.stateType == 0) {
					if (this.addType == 1) {
						url = 'user/wisdom.Lists/articleList';
					} else if (this.addType == 999) {
						url = 'user/shakeschool.Lists/informationList';
					} else {
						url = 'user/article.Lists/articleList';
					}
					if (this.addType == 999) {
						data = {}
						data.information_id = this.article_id
						data.admin_user_id = this.admin_user_id
					} else {
						data.article_id = this.article_id
						if (this.releaseType != 1) {
							data.is_user = 1
							data.is_check = this.releaseType
						}
					}
				} else if (this.stateType == 1) {
					url = 'user/newarticle.Lists/articleList';
					data.patriarch_article_id = this.article_id
				} else if (this.stateType == 2) {
					url = 'user/information.Lists/InformationList';
					data.im_id = this.article_id
					if (this.releaseType != 1) {
						data.is_show = this.releaseType
					}
				} else if (this.stateType == 3) {
					url = 'user/wisdom.Lists/articleList';
					data.article_id = this.article_id
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.data[0].subhead_content && res.data.data.data[0].subhead_content.indexOf('.mp4') != -1) {
							res.data.data.data[0].isMp4 = true
						} else {
							res.data.data.data[0].isMp4 = false
						}
						console.log('res文章', res.data.data.data[0]);
						this.article = res.data.data.data[0];
						if (this.stateType == 0) {
							if (this.article.type == 2) {
								this.article_fid = this.article.article_fid;
							}
							if (this.article.subhead_creat_time) {
								this.article.ftime = util.getBriefTime(this.article.subhead_creat_time);
							}
							if (this.article.is_like == 2) {
								this.collect = '取消收藏';
							} else {
								this.collect = '收藏';
							}
							if (this.addType != 999) {
								this.getBlack();
							} else {
								this.article['type'] = 1;
								this.article['nicheng'] = this.article.nickname;
							}
						} else if (this.stateType == 1) {
							this.article['type'] = 1;
						} else if (this.stateType == 2) {
							this.article['type'] = 1;
							this.article['title'] = this.article.im_title;
							this.article['content'] = this.article.im_content;
						}
						this.article.time = util.getBriefTime(this.article.creat_time);
						this.article.title = this.article.title.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(
							/[, ]/g, '');
						this.article.content = this.article.content.replace(/amp;/g, '').replace(/&lt;/g, '<').replace(/&gt;/g, '>');

						let num = Math.round(Math.random() * 3); //随机生成背景图索引
						this.article['videoImage_url'] = this.artBgs[num];
						let videobg =
							'width: 100%;height: 388upx;border-radius: 10upx;overflow: hidden;display: flex;justify-content: center;align-items: center;background:url(' +
							this.article.videoImage_url + ') no-repeat;background-size: 100% 100%;margin:20upx auto';
						let iclass =
							'color: #FFFFFF;font-size: 80upx;width: 690upx;height: 388upx;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.5);border-radius: 10upx;'
						this.article.content = this.article.content.replace('[#',
							'<view url="/pages/school/videoplay?path=').replace('#]', '" style="' + videobg +
							'"><i class="iconfont iconbofang" style="' + iclass + '" ></i> </view>')
						this.article.content = this.article.content.replace('<video src="',
							'<view url="/pages/school/videoplay?path=').replace('"><video>', '" style="' +
							videobg + '"><i class="iconfont iconbofang" style="' + iclass + '" ></i> </view>');
						this.article.content = this.article.content.replace(/<img[^>]*src=/g,
							'<img style="max-width:100%;margin:20upx auto;border-radius: 10upx;" dataWidth="345" src=');
						if (this.article.subhead_content) {
							/* .replace(/<p>/g, '').replace(/<\/p>/g, '') */
							/* .replace(/<p>/g,'').replace(/<\/p>/g,'') */
							// this.article.subhead_content = this.article.subhead_content.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '').replace(/&gt/g, '>').replace(/&lt/g, '>');
							// this.article.subhead_content = this.article.subhead_content.replace('<video src=','<view url="/pages/school/videoplay?path="').replace('><video>', '" style="' +videobg + '"><i class="iconfont iconbofang" style="' + iclass + '" ></i> </view>');
							/* this.article.subhead_content = this.article.subhead_content.replace(/&amp;/g,'&').replace(/&quot;/g,'"').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace('<video src="','<view url="/pages/school/videoplay?path=').replace('"><video>', '" style="' + videobg + '"><i class="iconfont iconbofang" style="' + iclass + '" ></i> </view>').replace(/<p>/g,'').replace(/<\/p>/g,'').replace(/<img/g,'<img style="max-width:100%;margin:20upx 0"') */
							this.article.subhead_content = this.article.subhead_content.replace(/&amp;/g,'&').replace(/&quot;/g,'"')
							.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace('<video src="','<view url="/pages/school/videoplay?path=')
							.replace('"><video>', '" style="' + videobg + '"><i class="iconfont iconbofang" style="' + iclass + '" ></i> </view>')
							.replace(/<img[^>]*src=/g,'<img style="max-width:100%;margin:20upx auto;border-radius: 10upx;" dataWidth="345" src=');
							console.log('==================');
							console.log(this.article.subhead_content);
						}

						// this.article.content = this.article.content+content
						/* console.log(this.article.content, "===+++===+++==="); */
						this.$forceUpdate();
					} else {
						this.article = {}
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
					this.isGetDetail = true;
				})
			},
			/* 增加阅读量 */
			addReadnum() {
				var url = ''
				if (this.addType == 1) {
					url = 'user/wisdom.Users/addbrowse';
				} else {
					url = 'user/article.Users/addbrowse';
				}
				this.$api.apiPost(url, {
					article_id: this.article_id
				}).then(res => {
					return;
				})
			},
			/* 判断是否拉黑此人 */
			getBlack() {
				this.$api.apiPost('user/video.User/UserBlackState', {
					form_id: this.article.user_id
				}).then(res => {
					this.black_state = res.data.data.black_state;
				})
			},
			/* 获取评论列表 */
			getComment() {
				var data = {
					page: this.page,
					pagesize: 8,
					article_id: this.article_id
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Users/listsReply';
				} else {
					url = 'user/article.Users/listsReply';
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].crate_time);
						}
						this.commentList = this.reload ? list : this.commentList.concat(list);
						console.log('评论列表', this.commentList);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.commentList = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 关注文章作者 */
			follow() {
				var url = '';
				if (this.article.follow_id) {
					url = 'user/video.User/UserFollowDel';
				} else {
					url = 'user/video.User/UserFollowAdd';
				}
				this.$api.apiPost(url, {
					form_id: this.article.user_id
				}).then(res => {
					if (this.black_state == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 200) {
							if (this.article.follow_id) {
								this.article.follow_id = null;
							} else {
								this.article.follow_id = 0 + '';
							}
						}
					} else {
						uni.showToast({
							title: '请先将对方移出黑名单',
							icon: 'none'
						})
					}
				})
			},
			/* 文章喜欢 */
			isLike() {
				if (this.article.is_like == 2) {
					this.changeIslike(1);
				} else {
					this.changeIslike(2);
				}
			},
			/* 点赞*/
			changeIslike(state) {
				var data = {
					article_id: this.article_id,
					is_like: state
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Users/isLike';
				} else {
					url = 'user/article.Users/isLike';
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						if (this.article.is_like == 1) {
							this.article.dislikenum--
							if (state == 2) {
								this.article.likenum++
							}
						} else if (this.article.is_like == 2) {
							this.article.likenum--
							if (state == 1) {
								this.article.dislikenum++
							}
						} else {
							if (state == 1) {
								this.article.dislikenum++
							} else if (state == 2) {
								this.article.likenum++
							}
						}
						this.article.is_like = data.is_like;
						if (this.article.is_like == 2) {
							this.collect = '点赞成功';
						} else {
							this.collect = '取消点赞';
						}
						uni.showToast({
							title: this.collect,
							icon: 'none'
						})
						uni.setStorageSync('articleDetail',this.article);
						this.$forceUpdate();
					}
				})
			},
			huifu: function(e, pid, video_reply_id, users_name) {
				this.pid = pid;
				this.video_reply_id = video_reply_id;
				this.placeholder = '回复:' + users_name;
				this.$refs.setfocus.setfocus();
			},
			/* 评论文章 */
			send(datas) {
				console.log(datas.msg, "=====");
				var data = {
					article_id: this.article_id,
					text: datas.msg,
					pid: this.pid,
					answer_id: this.video_reply_id
				}
				console.log(data, "=-===");
				if (!datas.msg) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
					return
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Users/addReply';
				} else {
					url = 'user/article.Users/addReply';
				}
				this.$api.apiPost(url, data).then(res => {

					if (res.data.code == 200) {
						this.page = 1,
							this.reload = true;
						this.getComment();
						this.apply_text = '';
						this.placeholder = '说点什么吧';
						this.pid = 0;
						this.video_reply_id = 0;
						this.article.commentnum++;
						if (!this.istran) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				if (this.istran) {
					this.forwardaction(datas.msg);
				}
			},
			/* 点击转发文章 */
			forward(article) {
				// this.$refs.popupfow.open()
				console.log('转发');
				console.log(article);
				let fowData = {
					nicheng: article.nicheng,
					title: article.title,
					articleId: article.article_id,
					content: article.content
				}
				if (article.type == 1) {
					if (article.imgList.length != 0) {
						fowData.imgUrl = article.imgList[0]
					} else {
						fowData.imgUrl = '../../static/images/fengmian.png'
					}
				} else if (article.type == 2) {
					if (article.img_url) {
						fowData.imgUrl = article.img_url
					} else {
						fowData.imgUrl = '../../static/images/fengmian.png'
					}
				}
				console.log('fowData', fowData);
				this.fowData = fowData
				this.placeholder = '说点什么吧';
				if (this.istran == false) {
					this.istran = true
					this.contentHeight = '800rpx'
				} else {
					this.istran = false
					this.contentHeight = null
				}
			},
			/* 转发文章  */
			forwardaction(msg) {
				var data = {
					article_id: this.article_id,
					title: msg
				}
				var url = '';
				if (this.addType == 1) {
					url = 'user/wisdom.Lists/transmitArticle';
				} else {
					url = 'user/article.Lists/transmitArticle';
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "转发评论成功",
							icon: 'none'
						})
						this.istran = false;
					} else {

					}
				})
			},
			/* 举报文章 */
			report() {
				this.isShow = false;
				if (this.article_fid) {
					uni.navigateTo({
						url: '/pages/album/album-report?article_id=' + this.article_fid
					})
				} else {
					uni.navigateTo({
						url: '/pages/album/album-report?article_id=' + this.article_id
					})
				}
			},
			/* 查看个人评论 */
			checkReply(article_reply_id, type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/articleModule/article-replyAll?stateType=' + this.stateType + '&addType=' +
							this.addType +
							'&article_id=' + this.article_id
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: '/pages/articleModule/article-replyPerson?stateType=' + this.stateType + '&addType=' +
							this.addType +
							'&article_id=' + this.article_id + '&article_reply_id=' + article_reply_id
					})
				}
			},
			/* 跳转个人主页 */
			person() {
				// if(this.addType == 1 || this.addType == 4) {
				// 	if (this.user_id == this.article.user_id) {
				// 		uni.navigateTo({
				// 			url: '/pages/parenting/index'
				// 		})
				// 	} else {
				// 		uni.navigateTo({
				// 			url: '/pages/parenting/index?user_id=' + this.article.user_id
				// 		})
				// 	}
				// }
				if (this.addType == 999) {
					uni.navigateTo({
						url: '/pages/school/personal?schoolId=' + this.article.admin_user_id + '&schoolName=' +
							this.article.nickname
					})
				} else {
					if (this.user_id == this.article.user_id) {
						uni.navigateTo({
							url: '/pages/school/my-center'
						})
					} else {
						uni.navigateTo({
							url: '/pages/school/my-center?user_id=' + this.article.user_id
						})
					}
				}
			},
			/* 关闭操作弹窗 */
			closeButton() {
				this.isShow = false;
				this.isDelete = false;
				this.isShare = false;
			},
			/* 打开底部分享弹窗 */
			togglePopup(type, open) {
				this.isShow = false;
				this.$refs[open].open();
			},
			/* 关闭底部分享弹窗 */
			cancel(type) {
				this.$refs[type].close()
			},
			/* 文章置顶 & 取消置顶 */
			isTopClick(topType) {
				this.isShow = false;
				var is_top = 1;
				if (topType == 1) {
					is_top = 2;
				} else if (topType == 2) {
					is_top = 1;
				}
				var data = {
					patriarch_article_id: this.article_id,
					is_top: is_top
				}
				this.$api.apiPost('user/newarticle.Lists/setTop', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 200) {
						this.article.is_top = is_top;
					}
					this.$forceUpdate();
				})
			},
			/* 打开删除文章蒙版 */
			deleteArt() {
				this.isShow = false;
				this.isDelete = !this.isDelete;
			},
			/* 确认删除 */
			btnYes() {
				this.isShow = false;
				this.isDelete = false;
				var data = {}
				var url = '';
				if (this.stateType == 0) {
					if (_this.addType == 1) {
						url = 'user/wisdom.Users/delArticle';
					} else {
						url = 'user/article.Users/delArticle';
					}
					data.article_id = this.article_id
				} else if (this.stateType == 1) {
					url = 'user/newarticle.Lists/delArticle'
					data.patriarch_article_id = this.article_id
				} else if (this.stateType == 2) {
					url = 'user/information.Lists/delInformation'
					data.im_id = this.article_id
				} else if (this.stateType == 3) {
					url = 'user/wisdom.Users/delArticle'
					data.article_id = this.article_id
				}
				this.$api.apiPost(url, data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 2
							})
						}, 1000);
					}
				})
			},
			/* 修改文章 */
			editArt() {
				this.isShow = false;
				if (this.stateType == 1) {
					uni.navigateTo({
						url: 'article-edit?stateType=' + this.stateType + '&addType=' + this.addType +
							'&article_id=' + this.article_id +
							'&article_type=' + this.article.article_type
					})
				} else {
					uni.navigateTo({
						url: 'article-edit?stateType=' + this.stateType + '&addType=' + this.addType +
							'&article_id=' + this.article_id +
							'&releaseType=' + this.releaseType
					})
				}
			},
			check() {
				this.isShow = false;
				uni.navigateTo({
					url: '../complain/be-reported?stateType=' + this.stateType + '&addType=' + this.addType +
						'&article_id=' + this.article_id +
						'&type=1'
				})
			},
			/* 收藏文章 */
			collectBtn() {
				if (this.article_id) {
					let resData = {
						article_id: this.article_id,
						collection_type: 1
					}
					uni.showLoading({
						title: '请稍后',
					});
					this.$api.apiPost('user/article.lists/articleCollection', resData).then(res => {
						const DATA = res.data
						uni.hideLoading()
						if (DATA.code == 200) {
							uni.showToast({
								title: '收藏成功'
							});
							this.$refs.popupWX.close()
						} else {
							uni.showToast({
								icon: 'none',
								title: '请勿重复操作'
							});
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '收藏失败'
					});
				}
			},
			/* 关闭收藏弹窗 */
			closeCollect() {
				this.showPopup = false;
			},
			/* 跳转播放视频 */
			video(path) {
				console.log('path', path);
				/* uni.navigateTo({
				url: '/pages/school/videoplay?path=',
				}); */
			}
		},
		watch: {
			// istran(newValue) {
			// 	console.log(newValue);
			// 	if (newValue) {
			// 		console.log('99999');
			// 		document.body.className = 'bodyHidden';
			// 		document.body.style = ""
			// 	} else {
			// 		document.body.className = 'bodyScroll';
			// 	}
			// }
		}
	}
</script>



<style lang="scss" scoped>
	page {
		background: #FFFFFF;
	}

	.content {
		width: 100vw;
		display: flex;
		/* padding-top: 30upx; */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.title {
		color: #333333;
		font-size: 34upx;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 30upx;
		width: 94%;
	}

	.info {
		width: 94%;
		margin-bottom: 20upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.left {
		width: 88upx;
		height: 88upx;
		margin-right: 14upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left image {
		width: 88upx;
		height: 88upx;
		border-radius: 50%;
	}

	.center view {
		line-height: 1.4;
	}

	.name {
		color: #333333;
		font-size: 26upx;
		margin-bottom: 8upx;
	}

	.time {
		color: #999999;
		font-size: 22upx;
	}

	.follow {
		color: #ffffff;
		font-size: 26upx;
		background: #00d5a2;
		line-height: 1;
		padding: 14upx 36upx;
		border-radius: 26upx;
		position: absolute;
		right: 30upx;
	}

	.follow_cancel {
		color: #ffffff;
		background: #E5E5E5;
	}

	.followTitle {
		color: #333333;
		font-size: 32upx;
		margin-bottom: 10upx;
		width: 94%;
	}

	.from {
		width: 100%;
		border: 1px solid rgba(229, 229, 229, 1);
	}

	.fromInfo {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20upx 0 0 20upx;
	}

	.fromInfo-left {
		width: 72upx;
		height: 72upx;
		margin-right: 20upx;
	}

	.fromInfo-left image {
		width: 72upx;
		height: 72upx;
		border-radius: 50%;
	}

	.fromInfo_name {
		color: #333333;
		font-size: 30upx;
		line-height: 1.2;
	}

	.fromInfo_time {
		color: #999999;
		font-size: 22upx;
		line-height: 1.2;
	}

	.from .title {
		width: 100%;
		color: #333333;
		font-size: 32upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.titleShort {
		width: calc(100% - 150upx) !important;
	}

	.fromCont {
		width: 100%;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		min-height: 120upx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.fromCont .title {
		line-height: 1.8;
		margin-bottom: 0;
	}

	.fromCont image {
		width: 120upx;
		height: 120upx;
	}

	.cont {
		color: #333333;
		font-size: 32upx;
		word-wrap: break-word;
		width: calc(100% - 60upx);
		margin: auto;
	}
	
	/* /deep/ .cont uni-view.p uni-view:not(.text){
		text-align: center;
	} */
	/deep/ .cont uni-image:parent{
		text-align: center;
	}

	.cont image {
		clear: both !important;
		display: block !important;
		margin: auto !important;
	}

	/* 标签及阅读量 */
	.cont_info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 20upx 0;
	}

	.from .cont_info {
		margin: 10upx 0 0 20upx;
	}

	.tip {
		color: #00d5a2;
		padding: 8upx 16upx;
		border: 2upx solid #00d5a2;
		border-radius: 24upx;
		line-height: 1;
		margin-right: 14upx;
		font-size: 24upx;
	}

	.num {
		color: #999999;
		font-size: 22upx;
	}

	/* 阅读者情况 */
	.evaluate {
		display: flex;
		justify-content: flex-end;
		margin-top: 24upx;
		width: 94%;

		.evaluate_item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 40upx;
			color: #999999;

			.evaluate_item_text {
				font-size: 26upx;
				margin-left: 5upx;
			}

			i {
				font-size: 30upx;
			}

			.iconforward-null {
				font-size: 40upx;
			}

			// .iconzanpress {
			// 	font-size: 28upx;
			// }

			// .iconpinglun2 {
			// 	font-size: 28upx;
			// }

			// .iconforward-null {
			// 	font-size: 28upx;
			// }
		}
	}


	/* 一级评论 */

	.none {
		width: 100%;
		color: #999999;
		text-align: center;
		margin-top: 200upx;

	}

	.item-one {
		display: flex;
		flex-direction: row;
		width: 690rpx;
		margin: 30rpx;
	}

	.item-one-head {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.item-one-text {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.item-one-name {
		display: flex;
		justify-content: flex-start;
	}

	.item-one-name-text {
		font-size: 26rpx;
		color: #333333;
	}

	.item-one-name-lable {
		width: 64rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		color: #999;
		background-color: #EEEEEE;
		font-size: 24rpx;
		border-radius: 18rpx;
		margin-left: 20rpx;
	}

	.item-one-content {
		color: #666666;
		font-size: 24rpx;
		width: 600rpx;
		margin-top: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
	}

	/* 一级评论 */
	/* 二级评论 */
	.item-two {
		display: flex;
		flex-direction: row;
		width: 600rpx;
		margin-left: 112rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

	}

	.item-two-btn {
		font-size: 22rpx;
		color: #00D5A2;
	}

	.item-two-head {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}

	.item-two-text {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.item-two-name {
		display: flex;
		flex-direction: row;
	}

	.item-two-name-text {
		font-size: 26rpx;
		color: #333333;

	}

	.item-two-name-lable {
		width: 64rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		color: #999;
		background-color: #EEEEEE;
		font-size: 24rpx;
		border-radius: 18rpx;
		margin-left: 20rpx;
	}

	.item-two-content-text {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.item-two-content-lable {
		color: #666666;
		font-size: 24rpx;
		width: 120rpx;
		margin-top: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
	}

	.item-two-content {
		color: #666666;
		font-size: 24rpx;
		width: 500rpx;
		margin-top: 20rpx;
	}

	/* 二级评论 */




	/* 底部弹窗 */
	.button {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.buttonView {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #f6f6f6;
		border-radius: 42upx 42upx 0 0;
	}

	.buttonView view {
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 30upx;
		color: #333333;
		background: #FFFFFF;
		border-top: 2upx solid #F6F6F6;
	}

	.buttonView view:first-child {
		border-radius: 40upx 40upx 0 0;
		border: none;
	}

	.cancle {
		border: none;
		margin-top: 30upx;
	}

	.deleteView {
		position: fixed;
		width: 422upx;
		height: 234upx;
		top: calc(50% - 117upx);
		left: calc(50% - 211upx);
		background-color: #ffffff;
		border-radius: 20upx;
	}

	.deleteTitle {
		color: #333333;
		font-size: 36upx;
		padding: 30upx;
		line-height: 1.4;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
	}

	.btn_cancle {
		color: #999999;
		font-size: 36upx;
	}

	.btn_yes {
		color: #00d5a2;
		font-size: 36upx;
	}

	.bottom {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 690upx;
		padding: 0 30upx;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fafafa;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.16);
	}

	.bottom input {
		width: 80%;
		background: #ffffff;
		border-radius: 8upx;
		padding-left: 20upx;
		height: 66upx;
		line-height: 66upx;
	}

	.bottom .input {
		color: #cccccc;
		font-size: 30upx;
	}

	.send {
		color: #ffffff;
		font-size: 34upx;
		background: #00d5a2;
		border-radius: 8upx;
		padding: 16upx 20upx;
		line-height: 1;
	}

	.vague {
		opacity: 0.3;
	}

	/* 底部分享 */
	.uni-share {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.uni-bottom {
		width: 100%;
		position: absolute;
		bottom: 0;
	}

	.uni-share-title {
		/* position: absolute;
		bottom: 242upx; */
		/* width: 690upx; */
		width: 100%;
		height: 88upx;
		line-height: 60upx;
		font-size: 32upx;
		/* padding: 30upx 30upx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 40upx 40upx 0 0;
		background: #FFFFFF;
	}

	.uni-share-content {
		/* position: absolute;
		bottom: 0; */
		/* width: 650upx; */
		width: 100%;
		height: 252upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		/* padding: 60upx 50upx 30upx; */
		background: #FFFFFF;
		border-top: 1upx solid rgba(229, 229, 229, 1);
	}

	.uni-share-content-box {
		width: 20%;
		justify-content: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}

	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border-radius: 10upx;
	}

	.uni-share-content-image i {
		font-size: 50upx;
		width: 76upx;
		height: 76upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 76upx;
		border-radius: 50%;
	}

	.iconweixin,
	.iconpengyouquan {
		background: #3CB035;
	}

	.iconqq {
		background: #55ADEC;
	}

	.iconweibo {
		background: #F25252;
	}

	.iconchengyuan {
		background: #00D5A2;
	}

	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.title_text {
		margin-left: 30upx;
	}

	.uni-share-btn {
		text-align: center;
		color: #666;
		margin-right: 30upx;
	}

	.commentTitle {
		height: 120upx;
		width: 97%;
		line-height: 120upx;
		border-bottom: 1upx solid #DCDFE6;
		color: #333333;
		font-weight: 500;
		padding-left: 3%;
	}

	.share {
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		text-align: right;
		background-color: #fff;
		height: 120rpx;
		align-items: center;
	}

	.collShare {
		background-color: #FFFFFF;
		height: 156rpx;
		padding: 0 168rpx 0 168rpx;
		display: flex;
		justify-content: space-between;
	}

	.collShare view view {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.collShare view {
		text-align: center;
	}

	.collShare view text {
		color: #C0C4CC;
		font-size: 24rpx;
		font-weight: 500;
	}

	.iconfont {
		font-size: 60rpx;
	}

	.closeCollect {
		padding-top: 44rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: #333333;
		font-weight: 500;
		font-size: 32rpx;
		padding-bottom: 32rpx;
	}

	#popupWX {
		background-color: #003BE4;
		height: 0;
		z-index: 999;
	}

	.artDes{
		width: 100%;
		.tit{
			width: 690rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 500;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin: 30upx auto;
		}
		
		.cont{
			font-size: 28rpx;
			color: #333333;
		}
	}

	.fowArt {
		background-color: #EFEFEF;
		width: 690rpx;
		height: 120rpx;
		margin: 40rpx 30rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}

		.fowText {
			margin-top: 24rpx;
			margin-left: 30rpx;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;

			view:nth-child(1) {
				color: #333333;
				font-weight: 500;
				font-size: 28rpx;
			}

			view:nth-child(2) {
				color: #999999;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}

	.showPopup {
		background: rgba(51, 51, 51, 0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		.showPopup-cont {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #FFFFFF;
			border-radius: 10upx 10upx 0 0;

			.popup-title {
				color: #F4F7FC;
				text-align: right;
				padding: 30upx;
			}

			.popup-cont {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 20upx 0;

				.popup-cont-item {
					display: flex;
					align-items: center;
					flex-direction: column;

					i {
						color: #FFFFFF;
						font-size: 50upx;
						padding: 26upx;
						border-radius: 50%;
					}

					.iconshoucang {
						background: #00ACFE;
					}

					.iconjubao {
						background: #FF7171;
					}

					text {
						color: #C0C4CC;
						font-size: 26upx;
						margin-top: 26upx;
					}
				}
			}

			.popup-cancel {
				padding: 30upx 0;
				text-align: center;
				color: #333333;
				font-size: 34upx;
			}
		}
	}

	.resicon {
		position: absolute;
		z-index: 9;
		color: #FFFFFF;
		font-size: 40px;
		background: #000000;
		opacity: 0.5;
		width: 100%;
		height: 360rpx;
		border-radius: 10upx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin-top: 74rpx;
	}
	
	/deep/ .p{
		
	}
</style>
